<template>
  <el-dialog title="分配角色" :visible="assignShowVisible" width="30%" @close="close">
    <el-form label-width="80px">
      <el-form-item label="用户账号">
        <el-input disabled :value="user.username" />
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input disabled :value="user.nickName" />
      </el-form-item>

      <el-form-item label="角色列表">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0" />
        <!-- 这里的v-model="prepossessRoles"绑定的是已经选中的角色信息,注意prepossessRoles是角色id数组，他代表是选中状态 -->
        <el-checkbox-group v-model="prepossessRoles" @change="checkedItemChange">
          <el-checkbox v-for="item in allRoles" :key="item.roleId" :label="item.roleId">
            {{ item.roleName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="small" @click="saveAssignRole">保存</el-button>
      <el-button size="small" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { toAssign, doAssign } from '@/api/user'
  export default {
    props: {
      assignShowVisible: {
        type: Boolean,
        default: false
      },
      user: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        dialogVisible: false,
        allRoles: [], // 全部角色信息
        prepossessRoles: [], // 当前用户所属的角色的roleId数组
        checkAll: false, // 是否全选 默认是false
        isIndeterminate: true
      }
    },
    watch: {
      // 监听外部传入的 assignShowVisible 变化
      assignShowVisible(user) {
        if (user) {
          // 当对话框显示时执行的逻辑
          this.toAssign()
        }
      }
    },
    created() {
      this.toAssign()
    },
    methods: {
      // 通知父组件关闭弹窗
      close() {
        this.$emit('update:assignShowVisible', false)
        this.allRoles = []
        this.prepossessRoles = []
      },
      /**
       * 获取当前用户的角色信息
       */
      async toAssign() {
        // 拿到全部的角色
        const { allRoles, prepossessRoles } = await toAssign(this.user.userId)
        this.allRoles = allRoles
        // 将当前用户的角色转换为角色ID数组
        this.prepossessRoles = prepossessRoles.map(role => role.roleId)
      },
      /**
       * 是否全选事件 勾选的时候是true 取消勾选是false
       */
      handleCheckAllChange(value) {
        // 如果勾选了全选，那么将全部的角色绑定给prepossessRoles，反正给prepossessRoles赋值一个空的数组
        this.prepossessRoles = value ? this.allRoles.map(item => item.roleId) : []
        this.isIndeterminate = false
      },

      /**
       * 选中/反选
       */
      checkedItemChange(value) {
        const checkedCount = value.length
        this.checkAll = checkedCount === this.allRoles.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allRoles.length
      },
      /**
       * 保存当前用户与角色的关联关系
       */
      async saveAssignRole() {
        const assignUserRoleDto = {
          userId: this.user.userId,
          roleIds: this.prepossessRoles
        }
        await doAssign(assignUserRoleDto)
        this.close()
        this.$message.success('添加角色成功')
      }
    }
  }
</script>

<style></style>
